<template>
  <div class="home">
    {{ user.age }}
    <button type="button" @click="fn1">ref工具</button>
    <hr />
    <ChildView title="illoveyou" :age="100" @myclick="myfn" :a="100" b="hell"></ChildView>
  </div>
</template>

<script>
import { reactive, readonly, isRef, ref, isReactive, isProxy, unref } from 'vue'
import ChildView from './ChildView.vue'
export default {
  name: 'HomeView',
  components: {
    ChildView
  },
  setup() {
    let a = ref(1)
    let obj = reactive({ age: 10 })

    let user = readonly(obj) // 返回这个对象的只读的副本。

    // console.log(obj === user)

    obj.age = 1000

    // user.age = 1000 ///warning: ’target is readonly"

    const fn1 = () => {
      console.log(isReactive(obj))
      console.log(isRef(a))
      console.log(isProxy(a), isProxy(obj))
    }

    const myfn = v => {
      console.log('触发自定义的事件', unref(v)) // unref(v),如果v是一个ref对象，就返回v.value的值，否则返回v。
    }
    return {
      user,
      obj,
      fn1,
      myfn
    }
  }
}
</script>
